<script lang="ts" setup>
import { ref } from 'vue'
import qwjs from './tabs/qwjs.vue'
import flcx from './tabs/flcx.vue'
import daxq from './components/daxq/index.vue'

const loading = ref<boolean>(false)
const activeName = ref('qwjs')

const qwjsRef = ref<InstanceType<typeof qwjs>>()
const flcxRef = ref<InstanceType<typeof flcx>>()

const tabsList = ref([
  {
    label: '全文检索',
    name: 'qwjs',
    closable: false,
  },
  {
    label: '分类查询',
    name: 'flcx',
    closable: false,
  },
])

// tbs切换
const changeTabs = (val: string) => {
  switch (val) {
    case 'flcx':
      flcxRef.value!.changePageNum(1)
      break
  }
}

const removeTabs = (name: string) => {
  const i = tabsList.value.findIndex((tab) => tab.name === name)
  if (i > 0) activeName.value = tabsList.value[i - 1].name
  else activeName.value = 'flcx'
  tabsList.value.splice(i, 1)
}

/*
 * 查看档案，添加tab
 */
const currentDaxq = ref<any>()
const addTab = (row: any) => {
  const tab = tabsList.value.find((el) => el.name === row.dh)
  if (!tab) {
    tabsList.value.push({
      label: row.dh,
      name: row.dh,
      closable: true,
    })
  }
  currentDaxq.value = row
  activeName.value = row.dh
}
</script>
<template>
  <div class="container" v-loading="loading">
    <!-- type="border-card" -->
    <el-tabs type="card" v-model="activeName" @tab-change="changeTabs" @tab-remove="removeTabs">
      <el-tab-pane
        v-for="item in tabsList"
        :key="item.name"
        :label="item.label"
        :name="item.name"
        :closable="item.closable"
        lazy
      >
        <qwjs ref="qwjsRef" v-if="activeName === 'qwjs'"></qwjs>
        <flcx ref="flcxRef" v-else-if="activeName === 'flcx'" @addTab="addTab"></flcx>
        <daxq :daxq="currentDaxq" v-else></daxq>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
</style>
